import classnames from 'classnames'
import styles from './index.module.scss'
import type { ArticleItemType } from '@/type'
import { useNavigate } from 'react-router'

type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  type: 0 | 1 | 3
  articleData: ArticleItemType
}

const ArticleItem = ({ type, articleData }: Props) => {
  const navigate = useNavigate()
  return (
    <div
      className={styles.root}
      onClick={() => navigate(`/article?id=${articleData.art_id}`)}>
      <div
        className={classnames(
          'article-content',
          type === 3 && 't3',
          type === 0 && 'none-mt'
        )}>
        <h3>{articleData.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {articleData.cover.images.map((item) => {
              return (
                <div key={item} className="article-img-wrapper">
                  <img alt="" src={item} />
                </div>
              )
            })}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{articleData.aut_name}</span>
        <span>{articleData.comm_count} 评论</span>
        <span>2 天前</span>
      </div>
    </div>
  )
}

export default ArticleItem
